<extend name="layout/main" />

<block name="HEADER">
	<script type="text/javascript" src="__PUBLIC__/lib/echarts.min.js"></script>
	<style>
		.layuiadmin-card-list {
			padding: 7px 10px;
		}

		.layuiadmin-card-list p.layuiadmin-big-font {
			font-size: 30px;
			color: #da312c;
		}

		.layadmin-backlog .layadmin-backlog-body {
			padding: 10px 7px;
		}

		.layadmin-backlog-body p cite {
			font-size: 24px;
		}



		.means-img {
			width: 100%;
			height: 120px;
			display: block !important;
		}

		.means-list {
			padding: 5px;
			overflow: hidden;
		}

		.means-list li {
			text-align: left;
			font-size: 12px;
		}

		.means-evaluate-list {
			border-top: 1px solid #efefef;
			padding: 5px 0;
			overflow: hidden;
		}

		.means-evaluate-list li {
			font-size: 12px;
			width: 25%;
			line-height: 20px;
			float: left;
			text-align: center;
		}


		/*联系方式*/
		.contact {
			height: 50px;
			line-height: 40px;
			padding: 5px 10px;
		}

		.contact span {
			padding: 0 10px;
		}

		.contact em {
			font-weight: bold;
		}


		/*数据预览*/
		.myChart {
			height: 90%;
			margin-bottom: 10px;
			position: relative;
		}

		.layuiadmin-btn-group .active {
			background: #2ec7c9;
			color: white !important;
			border: 1px solid #2ec7c9;
		}

		.wrapper-title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			background-color: #ccc;
		}

		.row-title {
			background-color: #eee;
		}

		.table-info{
			border-left: 1px solid #ddd;
		}
		.table-info td {
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			padding: 10px;
		}

		.table-info .info{
			text-align: center;
			width: 15%;
		}

		.set-form{
			padding: 20px;
		}
		.set-table td{
			padding: 10px;
			text-align: center;
		}
		
		.content .title{
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			margin-top: 30px;
		}
		content .subtitle{
			margin-top: 20px;
			text-align: center !important;
		}

		.hidden {
			visibility: hidden;
		}
	</style>
</block>

<block name="CONTENT">
	<div class="wrapper">
		<div class="panel-heading">
			<control:search id="searchs" />
		</div>
		<div class="content">
			<div class="wrapper-title row-title">
				数据
			</div>
			<div class="layui-row">
				<div id="title" class="title layui-col-md12 layui-col-sm12 "></div>
				<div class="subtitle layui-col-md12 layui-col-sm12 " style="text-align: center;">
					合计：￥ <span id="subtitle"></span>
				</div>
				<div class="layui-col-md12 layui-col-sm12 " style="height: 500px;">
					<div id="chart" class="myChart"></div>
				</div>
			</div>
		</div>

	</div>
</block>

<block name="FOOTER">

	<script type="text/javascript">
		var page = (function (ns) {

			//搜索事件
			ns.query = function () {
				let data = searchs.getData()
				let params = {}
				console.log(data)
				data.forEach(function (item) {
					params[item.field] = item.value
				})
				if( !params['month'] ){
					params['month'] = ''
				}
				$.ajaxs('/admin/v2/user_analysis/getNewOldUser', params).then(function (res) {
					var xArr = []
					var yArr= { new: [], old: [] }
					// var num = 0
					var money = 0
					var list = res.data[0]

					for( var obj in list ){
						xArr.push(obj)
						yArr['new'].push(list[obj].new_num)
						yArr['old'].push(list[obj].old_num)
						money = money + Number(list[obj].new_num) + Number(list[obj].old_num)
					}

					// res.data.forEach(item=>{
					// 	num++
					// 	xArr.push(num)
					// 	yArr['new'].push(item.new_num)
					// 	yArr['old'].push(item.old_num)
					// 	money = money + Number(item.new_num) + Number(item.old_num)
					// })
					ns.loadChartBar(xArr, yArr)

					// $('#title').text(params.type)
					$('#subtitle').text(money.toFixed(2))	
				})
			}

			ns.toProgramme = function(){
				var filter={ url:"/modules/analysis/programme/index", mode:2}	
				$.openFullWin(filter, '')
			}

			ns.loadChartBar = function (xArr, yArr) {
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						bottom: '0%',
						itemGap: 20,
						data: ['新客户', '老客户']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xArr,
						
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					// barWidth: '25%',
					barGap: '0%',	
					series: [
						{
							name: '新客户',
							type: 'bar',
							data: yArr.new,
							itemStyle: {
								color: '#38A0FF'
							},
						},
						{
							name: '老客户',
							type: 'bar',
							data: yArr.old,
							itemStyle: {
								color: '#4CCA73'
							}
						}
					]
				};
				echarts.init( document.getElementById("chart") ).setOption(option, true);
			}	
			

			//页面初始化
			ns.init = function () {
				searchs.clickQuery();
			}

			return ns;
		}({}));


		$(function () { page.init(); });

	</script>
</block>